<template>
  <div class="setting">
    <el-card>
      <el-tabs class="mytabs" v-model="activeName" @tab-click="companyInfo">
        <el-tab-pane label="角色管理" name="first" class="firstTab">
          <el-button type="primary" size="mini" @click="addRole"
            >+ 新增角色</el-button
          >
          <el-table
            :data="tableData"
            style="width: 100%"
            class="mytable"
            border
          >
            <el-table-column label="序号" width="150" type="index">
            </el-table-column>
            <el-table-column prop="name" label="角色名" width="150">
            </el-table-column>
            <el-table-column prop="description" label="描述" width="600">
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button type="text" @click="privileges(scope.row.id)"
                  >分配权限</el-button
                >
                <el-button type="text" @click="openDialog(scope)"
                  >修改</el-button
                >
                <el-button
                  type="text"
                  @click="deleteRole(scope)"
                  class="delebtn"
                  :disabled="'employees-delete' | btndelete"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <div class="mypagination">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="page.currentPage"
              :page-sizes="page.pageSizes"
              :page-size="page.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="page.total"
            >
            </el-pagination>

            <el-dialog :title="dialogTop" :visible.sync="showDialog">
              <el-form :model="formData" :label-position="labelPosition">
                <el-form-item label="角色名称" prop="name">
                  <el-input v-model="formData.name"></el-input>
                </el-form-item>
                <el-form-item label="角色描述" prop="description">
                  <el-input v-model="formData.description"></el-input>
                </el-form-item>
              </el-form>
              <span slot="footer" class="dialog-footer">
                <el-button @click="cancle">取 消</el-button>
                <el-button type="primary" @click="submit">确 定</el-button>
              </span>
            </el-dialog>
          </div>
        </el-tab-pane>
        <el-tab-pane label="公司信息" name="second" class="mycompany">
          <el-form
            :label-position="labelPosition"
            label-width="80px"
            :model="formLabelAlign"
            style="width: 40%;"
          >
            <el-form-item label="企业名称">
              <el-input
                v-model="formLabelAlign.name"
                :disabled="true"
              ></el-input>
            </el-form-item>
            <el-form-item label="公司地址">
              <el-input
                v-model="formLabelAlign.companyAddress"
                :disabled="true"
              ></el-input>
            </el-form-item>
            <el-form-item label="公司电话">
              <el-input
                v-model="formLabelAlign.companyPhone"
                :disabled="true"
              ></el-input>
            </el-form-item>
            <el-form-item label="邮箱">
              <el-input
                v-model="formLabelAlign.mailbox"
                :disabled="true"
              ></el-input>
            </el-form-item>
            <el-form-item label="备注">
              <el-input
                v-model="formLabelAlign.remarks"
                :disabled="true"
              ></el-input>
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
    </el-card>
    <template>
      <roleper :showRolePer.sync="showRolePer" ref="myRolePer"></roleper>
    </template>
  </div>
</template>

<script>
import {
  getAllRoleApi,
  editRoleApi,
  addRoleApi,
  deleteRoleApi,
  getCompanyApi
} from '../../api/setting'
import roleper from './componets/roleperIds.vue'
export default {
  components: {
    roleper
  },
  data () {
    return {
      activeName: 'first',
      tableData: [],
      page: {
        currentPage: 1,
        pageSizes: [1, 5, 10, 20, 30],
        pageSize: 5,
        total: 20
      },
      showDialog: false,
      formData: {
        name: '',
        description: ''
      },
      labelPosition: 'right',
      formLabelAlign: {},
      dialogTop: '',
      showRolePer: false
    }
  },
  methods: {
    privileges (id) {
      this.showRolePer = true
      this.$refs.myRolePer.getRoleInfo(id)
      this.$refs.myRolePer.getTreeListHanlde()
    },
    async companyInfo (target) {
      if (target.label === '公司信息') {
        const res = await getCompanyApi({ id: 1 })
        console.log(res)
        this.formLabelAlign = res
      }
    },
    openDialog (obj) {
      this.dialogTop = '修改角色'
      this.showDialog = true
      this.formData.name = obj.row.name
      this.formData.description = obj.row.description
      this.formData.id = obj.row.id
    },
    cancle () {
      this.showDialog = false
      this.formData = {
        name: '',
        description: ''
      }
    },
    async deleteRole (obj) {
      try {
        await this.$confirm('此操作将永久删除该角色, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        await deleteRoleApi(obj.row.id)
        this.$message({
          type: 'info',
          message: '删除成功'
        })
        if (this.page.total === 0 && this.page.currentPage > 1) {
          this.page.pageSize--
        }
        this.getAllRole()
      } catch {
        return
      }
    },
    async submit () {
      if (this.formData.id) {
        console.log(11)
        const res = await editRoleApi(this.formData)
        console.log(res)
        this.$message({
          type: 'info',
          message: '编辑成功'
        })
      } else {
        console.log(33)
        const res = await addRoleApi(this.formData)
        console.log(res)
        this.$message({
          type: 'info',
          message: '新增成功'
        })
      }
      this.showDialog = false
      this.formData = {
        name: '',
        description: ''
      }
      this.getAllRole()
    },
    addRole () {
      this.showDialog = true
      this.dialogTop = '新增角色'
    },
    async getAllRole () {
      const res = await getAllRoleApi({
        page: this.page.currentPage,
        pagesize: this.page.pageSize
      })
      console.log(res)
      this.page.total = res.total
      this.tableData = res.rows
    },
    handleSizeChange (size) {
      console.log(size)
      this.page.pageSize = size
      this.getAllRole()
    },
    handleCurrentChange (current) {
      this.page.currentPage = current
      this.getAllRole()
    }
  },
  created () {
    this.getAllRole()
  }
}
</script>

<style lang="scss">
.setting {
  padding: 20px 20px;
  .mytabs {
    .el-tabs__item {
      padding: 0 50px;
      font-size: 18px;
    }
    .firstTab {
      padding: 35px 15px;
    }
    .mytable {
      margin-top: 25px;
    }
    .mypagination {
      margin-top: 10px;
      display: flex;
      justify-content: center;
    }
    // .delebtn {
    //   color: #666;
    // }
  }
  .mycompany {
    padding: 20px 40px;
  }
}
</style>
